/**
 *  学习目标：Todos 案例
 */
import React, { useState,useEffect } from 'react';
import './styles/base.css';
import './styles/index.css';
const initList = [
  {
    id:1,
    task:'学习js',
    isDone : false
  },
  {
    id:2,
    task:'学习vue',
    isDone : true
  },{
    id:3,
    task:'学习react',
    isDone : false
  }
]
export default function App() {
  const [list, setList] = useState( JSON.parse(localStorage.getItem("todo_list")) || initList)

  // 勾选逻辑
  const handleUpdateById = (id) => {
    const newList = list.map(item => {
      return {
        ...item,
        isDone:item.id===id ? !item.isDone :item.isDone
      }
    })
    setList(newList)
  }

  // 删除逻辑
  const handleDeleteById = (id) => {
    const newList = list.filter(item => item.id !== id)
    setList(newList)
  }

  // 新增逻辑
  const handleAdd = (task) => {
    const newTask ={id: Date.now(), isDone: false, task}
    setList([...list,newTask])
  }

  // 点击Footer 高亮 声明 type 状态
  const [type, setType] = useState(localStorage.getItem("todo_type")||"all")

  // useEffect 
  useEffect( () => {
    localStorage.setItem("todo_list",JSON.stringify(list))
    localStorage.setItem("todo_type",type)
  }, [list,type])

  // 定义计算属性showList
  const showList = list.filter((item)=>{
    // type 为active。则返回 item.isDone 为 false
    if(type ==="active") return !item.isDone
    // type 为completed。则返回 item.isDone 为 true
    if(type === "completed") return item.isDone
    return item
  })
  return (
      <section className="todoapp">
        {/* 头部 */}
        <Header handleAdd={handleAdd}></Header>
        {/* 主体 */}
        <Main list={showList} handleUpdateById={handleUpdateById} handleDeleteById={handleDeleteById}></Main>
        {/* 底部 */}
        <Footer type={type} setType={setType}></Footer>
      </section>
  )
}

function Footer({type,setType}) {
  return <footer className="footer">
    <span className="todo-count"><strong>1</strong> 剩余</span>
    <ul className="filters">
      <li>
        <a onClick={()=>setType("all")} className={type === "all" ? "selected" : ""} href="#/">全部</a>
      </li>
      <li>
        <a onClick={()=>setType("active")} className={type === "active" ? "selected" : ""} href="#/active">未完成</a>
      </li>
      <li>
        <a onClick={()=>setType("completed")} className={type === "completed" ? "selected" : ""} href="#/completed">已完成</a>
      </li>
    </ul>
    <button className="clear-completed">清除已完成</button>
  </footer>;
}

function Main({ list, handleUpdateById, handleDeleteById }) {
  return <section className="main">
    <input id="toggle-all" className="toggle-all" type="checkbox" />
    <label htmlFor="toggle-all">全选</label>
    <ul className="todo-list">
      {list.map(item => <li key={item.id} className={item.isDone ? "completed" : ""}>
        <div className="view">
          <input className="toggle" type="checkbox" checked={item.isDone} onChange={() => handleUpdateById(item.id)} />
          <label>{item.task}</label>
          <button className="destroy" onClick={() => handleDeleteById(item.id)}></button>
        </div>
      </li>)}
    </ul>
  </section>
}

function Header({ handleAdd }) {
  // 输入框内容
  const [task, setTask] = useState("")

  const handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      handleAdd(task)
    }
  }
  return <header className="header">
    <h1>todos</h1>
    <input className="new-todo" placeholder="需要做什么" autoFocus onChange={(e) => setTask(e.target.value)} onKeyDown={handleKeyDown} />
  </header>
}

